<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>我的记录</title>
	<link rel="stylesheet" type="text/css" href="http://bobo.bj.bcebos.com/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="font/iconfont.css">
	<style type="text/css">
		html,
		body,
		.container-fluid,
		.container-box,
		.row,
		ul,
		.date-box{
		    height: 100%;
		}
		html{ 
		font-size:12px; 
		} 
		.container-box{
			position: relative;
			overflow: hidden;
		}
		.date-box{
			position: relative;
			background-color: rgba(0,0,0,.85);
		}
		.action-box{
			position: absolute;
			top: 0;
			left: 0;
			padding: 20px;
			height: 100%;
			width: 100%;
			color: #fff;
		}
		.day{
			font-size: 360px;
			font-weight: 700;
			position: absolute;
			top:50%;
			left: 50%;
			margin-left: -180px;
			margin-top: -240px;
			color: #000;
		}
		li{
			width: 50%;
			height: 20%;
			border: 1px solid #c5985d;
			float: left;
			text-align: center;
			color: #c5985d;
			cursor: pointer;
		}
		.on{
			background-color: rgba(236,189,102,.1);
		}
		.icon{
			font-size: 50px;
		}
		p{
			font-size: 24px;
			margin-top: -3px;
		}
		.btn{
			position: absolute;
			bottom: 50px;
			width: 50%;
			margin-left: 25%;
		}
		.numberBox{
			display: none;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -27px;
			margin-left: -100px;
			height: 54px;
			width: 200px;
			border:3px solid #af6220;
			background-color: #fff;
		}
		.numberBox input,.numberBox button{
		    width: 60px;
    		margin: 10px;
		}
		#tjsj{
			z-index: 3000;
			position: absolute;
			bottom: 10px;
			left: 50%;
		}
	</style>
	<script src="http://bobo.bj.bcebos.com/jquery.min.js"></script>
</head>
<body>
	<input type="text" name="time" id="tjsj">
	<div class="row">
	<div class="col-sm-12 col-lg-6 col-lg-offset-3  container-box">
		<div class="row date-box">
			<p class="day">0</p>
		</div>
		<div class="col-lg-12 action-box">
			<ul class="list-unstyled">
				<li bl="5"><i class="icon iconfont icon-yundong"></i><p><span>锻炼身体</span><span class="num"></span></p></li>
				<li bl="10"><i class="icon iconfont icon-study"></i><p><span>学习进步</span><span class="num"></span></p></li>
				<li bl="10"><i class="icon iconfont icon-iconset0264"></i><p><span>个人项目</span><span class="num"></span></p></li>
				<li bl="2"><i class="icon iconfont icon-02"></i><p><span>编程词汇</span><span class="num"></span></p></li>
				<li bl="3"><i class="icon iconfont icon-shuxie"></i><p><span>丑陋的字</span><span class="num"></span></p></li>
				<li bl="30"><i class="icon iconfont icon-gongzuo"></i><p><span>认真工作</span><span class="num"></span></p></li>
				<li bl="1" style="width: 100%;"><i class="icon iconfont icon-jinggao"></i><p><span>不再犯规</span><span class="num"></span></p></li>
			</ul>
			<button id="submitfs" type="button" class="btn btn-warning btn-lg">提交</button>
		</div>
	</div>
	
	</div>

	<div class="numberBox">
		<input type="text" name="">分钟
		<button id="df">打分</button>
	</div>
	<script>
		var dom = {};
		var fsbl= 0;
		var date = new Date();
		var endm = date.getMonth()+1>9?date.getMonth()+1:"0"+(date.getMonth()+1);
        var endday = date.getDate()>9?date.getDate():"0"+date.getDate();
        var time = date.getFullYear()+"-"+endm+"-"+endday;
		 
		$("li").click(function(e){
			$(this).toggleClass("on");
			$(".numberBox input").val("");
			$(".numberBox").show();
			dom = $(this);
			fsbl = parseInt($(this).attr("bl"));
		})
		$("#df").click(function(e){
			var sjfs = parseInt($(this).siblings().val())/fsbl;
			dom.find('.num').text(parseInt(sjfs));
			$(this).parent().hide();
		})
		$("#submitfs").click(function(){
			time = $("#tjsj").val() ? $("#tjsj").val() : time;
			var saveobj = {"time":time,"grade":"","rank":""};
			var saveArry = [];
			var allnum = 0;
			$(".on").each(function(index,el){
				var value = $(el).find('.num').text();
				allnum = allnum+parseInt(value);
				var xw = $(el).find('span').eq(0).text();
				saveArry.push({"time":time,"grade":value,"behavior":xw});
			})
			$(".day").text(allnum);
			saveobj.grade = allnum;
			if(allnum-85>0){
				saveobj.rank = "优";
			}else if(allnum-70>0){
				saveobj.rank = "良";
			}else if(allnum-50>0){
				saveobj.rank = "中";
			}else{
				saveobj.rank = "差";
			}
			console.log(saveArry);
			console.log(saveobj);
			saveBehavior(saveArry);
			saveDay(saveobj);
		});

		function saveBehavior(arry){
			$.ajax({
				url: 'behaviorsever.php?act=savedatas',
				type: 'POST',
				dataType: 'html',
				data: {mydata: JSON.stringify(arry)},
			})
			.done(function(data) {
				console.log(data);
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("--------------");
			});
		}
		function saveDay(obj){
			$.ajax({
				url: 'daysever.php?act=add',
				type: 'POST',
				dataType: 'html',
				data: {mydata: JSON.stringify(obj)},
			})
			.done(function(data) {
				if(data == "success"){
					alert(data);
				}else{
					alert("添加失败");
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("--------------");
			});
		}
	</script>
</body>
</html>